<script>
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
export default {
  setup() {
    let route = useRoute();
    // console.log(route.query);
    const myfeedbackinfo = reactive({
      index: null,
      textlist: [],
      feedlist: [],
      content: "",
      phone: "",
      feedimg: "",
    });
    onMounted(() => {
      myfeedbackinfo.index = route.query.id;
      // console.log(myfeedbackinfo.index);
      myfeedbackinfo.textlist = JSON.parse(localStorage.getItem("textlist"));
      myfeedbackinfo.feedlist = myfeedbackinfo.textlist[myfeedbackinfo.index];
      myfeedbackinfo.content = myfeedbackinfo.feedlist.text;
    //   console.log(myfeedbackinfo.content);
      myfeedbackinfo.phone = myfeedbackinfo.feedlist.phone;
      myfeedbackinfo.feedimg = myfeedbackinfo.feedlist.feedimg;
    });
    return {
      myfeedbackinfo,
    };
  },
};
</script>

<template>
  <div class="container myfeedback">
    <div class="top">
      <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
      <span>我的反馈</span>
    </div>

    <!-- 反馈内容 -->
    <div class="content">
      <h3>反馈内容</h3>
      <p>{{ myfeedbackinfo.content }}</p>
    </div>

    <div class="gary-border"></div>

    <!-- 联系方式 -->
    <div class="content">
      <h3>联系方式</h3>
      <p>{{ myfeedbackinfo.phone }}</p>
    </div>

    <div class="gary-border"></div>

    <!-- 截图 -->
    <div class="content">
      <h3>截图</h3>
      <div class="img">
        <img :src="myfeedbackinfo.feedimg" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.myfeedback {
  .top {
    height: 49px;
    height: 49px;
    padding: 5px 10px;
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    display: flex;
    align-items: center;
    // margin-bottom: 20px;
    .iconfont {
      color: #fff;
      font-size: 20px;
    }
    span {
      flex: 1;
      // text-align: center;
      padding-left: 33%;
      font-size: 18px;
      color: #fff;
    }
  }
  .gary-border {
    display: block;
    height: 1px;
    background-color: #dddddd;
  }
  .content {
    padding: 15px;
    h3 {
      padding: 10px 0;
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
    img {
      width: 200px;
    }
    p {
      color: #757575;
    }
  }
}
</style>